<template>
	<view class="page">
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="监测判定标准详情" :autoBack="true" leftIconColor="#fff" bgColor="transparent" :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder></u-navbar>
		<view style="height: 80rpx;"></view>

		<view class="content">
			<!-- 基本信息 -->
			<view class="info">
				<view class="row"><text class="k">年份：</text><text class="v">{{ query.year || '—' }}</text></view>
				<view class="row"><text class="k">监测类别：</text><text class="v">{{ categoryName }}</text></view>
			</view>

			<view class="section">
				<view class="section-hd">
					<text class="title">检验方法和依据</text>
					<button class="btn add" @click="addItem">添加</button>
				</view>
				<view class="list">
					<view v-for="(it, idx) in items" :key="it.id" class="card">
						<view class="tools">
							<u-icon name="trash" color="#ff3b30" size="24" @click="remove(idx)"></u-icon>
						</view>
						<view class="line">
							<text class="idx">{{ idx + 1 }}、</text>
							<text class="k">检测项目：</text><text class="v">{{ it.name || '请输入' }}</text>
						</view>
						<view class="line" v-for="(th, i2) in it.thresholds" :key="i2">
							<text class="k">风险筛选值（mg/kg）{{ th.range }}：</text><text class="v">{{ th.value || '请输入' }}</text>
						</view>
						<view class="line"><text class="k">执行依据：</text><text class="v">{{ it.basis || '请输入' }}</text></view>
						<view class="line"><text class="k">检验方法：</text><text class="v">{{ it.method || '请输入' }}</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	data() {
		return {
			query: {},
			items: [
				{
					id: 1,
					name: '铅',
					thresholds: [
						{ range: 'PH≤5.5', value: '0.3' },
						{ range: '5.5<PH≤6.5', value: '0.3' },
						{ range: '6.5<PH≤7.5', value: '0.3' },
						{ range: 'PH>7.5', value: '0.6' }
					],
					basis: 'GB2762-2022',
					method: 'GB 5009—12-2023'
				},
				{
					id: 2,
					name: '铅',
					thresholds: [
						{ range: 'PH≤5.5', value: '0.3' },
						{ range: '5.5<PH≤6.5', value: '0.3' },
						{ range: '6.5<PH≤7.5', value: '0.3' },
						{ range: 'PH>7.5', value: '0.6' }
					],
					basis: 'GB2762-2022',
					method: 'GB 5009—12-2023'
				},
				{
					id: 3,
					name: '',
					thresholds: [
						{ range: 'PH≤5.5', value: '' },
						{ range: '5.5<PH≤6.5', value: '' },
						{ range: '6.5<PH≤7.5', value: '' },
						{ range: 'PH>7.5', value: '' }
					],
					basis: '',
					method: ''
				}
			]
		}
	},
	computed: {
		categoryName() {
			const map = { supervise: '监督抽检', routine: '常规监测' }
			return map[this.query.category] || '—'
		}
	},
	onLoad(options) {
		this.query = options || {}
	},
	methods: {
		addItem() {
			const id = Date.now()
			this.items.push({ id, name: '', thresholds: [
				{ range: 'PH≤5.5', value: '' },
				{ range: '5.5<PH≤6.5', value: '' },
				{ range: '6.5<PH≤7.5', value: '' },
				{ range: 'PH>7.5', value: '' }
			], basis: '', method: '' })
		},
		remove(idx) {
			this.items.splice(idx, 1)
		}
	}
}
</script>

<style lang="scss">
.mine-navbar-bg { position: fixed; top: 0; left: 0; width: 100%;  }
.page { background: #f6f7fb; min-height: 100vh; }
.content { padding: 24rpx; }
.info { color: #333; font-size: 28rpx; margin: 16rpx 0 10rpx; line-height: 1.8; }
.info .k { color: #666; }

.section { margin-top: 16rpx; }
.section-hd { display: flex; align-items: center; justify-content: space-between; padding: 18rpx 6rpx; color: #2b2f3a; font-weight: 600; }
.section-hd .title { font-size: 30rpx; }
.section-hd { border-bottom: 1rpx solid #e9edf2; }
.btn.add { background: #cfd6dc; color: #fff; border-radius: 12rpx; height: 60rpx; line-height: 60rpx; padding: 0 24rpx; font-size: 26rpx; }

.list { margin-top: 16rpx; display: flex; flex-direction: column; gap: 20rpx; }
.card { position: relative; background: #fff; border-radius: 16rpx; border: 1rpx solid #e9edf2; padding: 24rpx; }
.card + .card { margin-top: 0; }
.tools { position: absolute; right: 20rpx; top: 20rpx; }
.line { display: flex; flex-wrap: wrap; align-items: baseline; color: #333; font-size: 28rpx; line-height: 1.9; }
.line .k { color: #666; }
.idx { font-weight: 600; margin-right: 6rpx; }
</style>
